#include("header.html")
<style>
  .min-select {
    color: #337ab7;
    border-radius: 5px;
  }

  .page {
    position: relative;
  }

  .page .left {
    position: absolute;
    left: 10px;
    top: 0;
    height: 27px;
    line-height: 27px;
    font-size: 12px;
  }

  .page .left span {
    color: #337ab7;
    padding: 0 3px;
    cursor: pointer;
  }

  .page .right {
    position: absolute;
    right: 10px;
    top: 0;
    height: 27px;
    line-height: 27px;
    font-size: 12px;
  }

  .page ul {
    margin: 0;
  }

  .page li > a {
    padding: 5px 12px;
    font-size: 11px;
  }

  .table {
    margin-bottom: 10px;
  }
</style>
<div class="admin-content">
  <div class="admin-box">
    <div class="col-lg-12 col-xs-12">
      <h4>仪表盘</h4>
    </div>
    <div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="box-min" style="background-image: url('/static/images/admin/art.png');">
          <div class="pull-right" onclick="location.href = '/admin/articles'">
            <p>已发布了</p>
            <p><strong>${articleNum ?! '0' }</strong></p>
            <p>篇文章</p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="box-min" style="background-image: url('../../static/images/admin/mem.png');">
          <div class="pull-right" onclick="location.href = '/admin/member'">
            <p>已经添加</p>
            <p><strong>${memberNum ?! '0'}</strong></p>
            <p>名成员</p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="box-min" style="background-image: url('../../static/images/admin/mail.png');">
          <div class="pull-right" onclick="location.href = '/admin/email'">
            <p>收到</p>
            <p><strong>${emailNum ?! '0'}</strong></p>
            <p>封邮件</p>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="box-min" style="background-image: url('../../static/images/admin/biao.png');">
          <div>
            <p>今日访客：<strong>${todayVs ?! '0'}</strong></p>
            <p>&nbsp;</p>
            <p>总访问量：<strong>${viewNum ?! '0'}</strong></p>
          </div>
        </div>
      </div>
    </div> <!-- 仪表框end -->
  </div>

  <div id="vue">
    <div class="pop-dialog" style="display: none;">
      <div class="pop-body">
        <span class="pop-close">&bigotimes;</span>
        <div class="pop-content">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h4 class="panel-title">邮件详情</h4>
            </div>
            <div class="panel-body">
              <table class="table table-bordered">
                <tr>
                  <td><b>发件人：</b>{{showEmail.name}}</td>
                  <td><b>时间：</b>{{showEmail.time}}</td>
                </tr>
                <tr>
                  <td colspan="3">
                    <div class="email-content">{{showEmail.content == null ? '无内容':showEmail.content}}</div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="col-lg-6 col-xs-6">
        <div class="panel panel-success">
          <div class="panel-heading">
            <span>邮件列表</span>
            <span class="pull-right panel-title"><a href="/admin/email">更多 &gt;&gt;</a></span>
          </div>
          <div class="panel-body">
            <div class="table-responsive">
              <table class="table text-center">
                <thead>
                <tr>
                  <td>发件人</td>
                  <td>时间</td>
                  <td>状态</td>
                  <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <tr is="em-tr" v-for="(item, index) in emailPage.rows"
                    :email="item"
                    :index="index"
                    :showem="showEm" :readed="readed"></tr>
                <tr v-show="emailPage.totalRows <= 0">
                  <td colspan="5">暂无未读邮件</td>
                </tr>
                </tbody>
              </table>
              <div v-show="emailPage.totalPages > 1" class="page">
                <div class="left">
                  <span @click="emailPage.pageNum=1">首页</span>
                  <span @click="emailPage.pageNum=emailPage.totalPages">尾页</span>
                </div>
                <ul class="pager">
                  <li><a @click="prev()" href="javascript:">&laquo;</a></li>
                  <li class="disabled"><a href="javascript:">{{emailPage.pageNum}}</a></li>
                  <li><a @click="next()" href="javascript:">&raquo;</a></li>
                </ul>
                <div class="right">
                  <span>{{emailPage.pageNum}}/{{emailPage.totalPages}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-6 col-xs-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <span>最近访客：<b>{{visPage.totalRows}}</b></span>
          <div class="pull-right">
            <select v-model="time" class="min-select">
              <option v-for="time in times" :value="time">{{time}}</option>
            </select>
          </div>
        </div>
        <div class="panel-body">
          <div class="table-responsive">
            <table class="table text-center">
              <thead>
              <tr>
                <td>序号</td>
                <td>访问IP</td>
                <td>地理位置</td>
                <td>时间</td>
              </tr>
              </thead>
              <tbody>
              <tr is="vis-tr" v-for="(item, index) in visPage.rows"
                  :index="index" :vis="item"></tr>
              <tr v-show="visPage.totalRows <= 0">
                <td colspan="3">暂无访客信息</td>
              </tr>
              </tbody>
            </table>
            <div v-show="visPage.totalPages > 1" class="page">
              <div class="left">
                <span @click="visPage.pageNum=1">首页</span>
                <span @click="visPage.pageNum=visPage.totalPages">尾页</span>
              </div>
              <ul class="pager">
                <li><a @click="prev()" href="javascript:">&laquo;</a></li>
                <li class="disabled"><a href="javascript:">{{visPage.pageNum}}</a></li>
                <li><a @click="next()" href="javascript:">&raquo;</a></li>
              </ul>
              <div class="right">
                <span>{{visPage.pageNum}}/{{visPage.totalPages}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<template id="vtem">
  <tr>
    <td>{{index + 1}}</td>
    <td>{{vis.ip}}</td>
    <td>{{vis.location}}</td>
    <td>{{vis.time}}</td>
  </tr>
</template>
<template id="emtem">
  <tr>
    <td>{{email.name}}</td>
    <td>{{email.time}}</td>
    <td>
      <span class="label label-warning" v-if="email.status === 0">未读</span>
      <span class="label label-success" v-else-if="email.status === 1">已读</span>
    </td>
    <td>
      <button @click="showem(index)" class="btn btn-xs btn-info">查看</button>
      <button @click="readed(index)" class="btn btn-xs btn-success">已读</button>
    </td>
  </tr>
</template>
<script>
  var vm = new Vue({
    el: '#vue',
    data: {
      visPage: {
        pageNum: 1,
        totalPages: 1,
        totalRows: 0,
        rows: []
      },
      emailPage: {
        pageNum: 1,
        totalPages: 1,
        totalRows: 0,
        rows: []
      },
      showEmail: {},
      times: [],
      time: null
    },
    methods: {
      page: function () {
        var self = this;
        $.post("/visitor/page", {no: this.visPage.pageNum, time: this.time}, function (data) {
          if (data.success) {
            self.visPage = data.payload;
          } else {
            self.visPage = { pageNum: 1, totalPages: 1, totalRows: 0, rows: [] };
          }
        });
      },
      prev: function (email) {
        if (email)
          this.emailPage.pageNum--;
        else
          this.visPage.pageNum--;
      },
      next: function (email) {
        if (email)
          this.emailPage.pageNum++;
        else
          this.visPage.pageNum++;
      },
      emPage: function () {
        var self = this;
        // 加载未读邮件
        $.post("/email/page/" + this.emailPage.pageNum, {status: 0}, function (data) {
          if (data.success) {
            self.emailPage = data.payload;
          } else {
            self.emailPage = { pageNum: 1, totalPages: 1, totalRows: 0, rows: [] };
          }
        });
      },
      showEm: function (index) {
        var self = this;
        this.showEmail = this.emailPage.rows[index];
        this.readed(index);
        openPop('vue');
      },
      readed: function (index) {
        var self = this;
        var em = this.emailPage.rows[index];
        $.post('/email/change', {id: em.id, status: 1}, function (data) {
          if (data.success) {
            self.emPage();
          }
        });
      }
    },
    watch: {
      time: function (nv, ov) {
        if (nv !== ov) {
          this.page();
        }
      },
      'visPage.pageNum': function (nv, ov) {
        if (nv !== ov && nv <= this.visPage.totalPages && nv > 0) {
          this.page();
        } else {
          this.visPage.pageNum = ov;
        }
      },
      'emailPage.pageNum': function (nv, ov) {
        if (nv !== ov && nv <= this.emailPage.totalPages && nv > 0) {
          this.emPage();
        } else {
          this.emailPage.pageNum = ov;
        }
      }
    },
    components: {
      'vis-tr': {
        props: ['index', 'vis'],
        template: '#vtem'
      },
      'em-tr': {
        props: ['index', 'email', 'showem', 'readed'],
        template: '#emtem'
      }
    },
    mounted: function () {
      var self = this;
      $.post("/visitor/times", function (data) {
        if (data.success) {
          self.times = data.payload;
        }
        if (self.times.length <= 0) {
          self.times.push(nowDate());
        }
        self.time = self.times[0];
      });

      this.emPage();
    }
  });

  function nowDate() {
    var d = new Date();
    return d.toISOString().substr(0, 10);
  }

  window.closeBefore = function () {
    window.setTimeout(function () {
      vm.showEmail = {};
    }, 400);
  }
</script>
#include("footer.html")